<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">

    <title>拖放</title>
    <!-- vue2 -->
    <script src="script/vue_2.js"></script>
    <!-- element 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- element 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="script/jquery-3.6.0.min.js"></script>
    <style>
        .btn {
            padding: 10px;
            position: fixed;
            top: 100px;
            width: 35px;
            background-color: darkblue;
            color: white;
            border: none;
            text-align: center;
            vertical-align: middle;
            left: 0;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            z-index: 499;
        }

        .draw {
            margin: 0;
            padding: 0;
            position: fixed;
            background-color: skyblue;
            top: 0;
            bottom: 0;
            z-index: 500;
            transition: all linear 0.2s;
            -moz-transition: all linear 0.2s;
            overflow-y: auto;
            width: 300px;
            left: 0;
            /*初始打开*/
        }

        button.close {
            height: 50px;
            width: 50px;
            border: none;
        }

        .item {
            margin: 5px;
            vertical-align: middle;
        }

        .item img {
            height: 50px;
            width: 50px;
        }

        .item p {
            font-size: small;
            margin: 0;
            text-align: left;
        }

        body{
            background-color: black;
        }

        #app {
            text-align: center; /*令画板在页面水平居中*/
        }

        #whiteboard {
            margin: auto; /*画板相对于页面水平居中*/
            background-color: wheat;
            width: 1500px;
            height: 850px;
            text-align: left; /*水平定位基准为画板最左边*/
            vertical-align: top; /*垂直定位基准为画板最顶部*/
            position: relative; /*设置为非static，以使其子元素能够相对于画板定位*/
        }
    </style>
</head>

<body>
    <div id="app">
        <button class="btn left" onclick="OpenToolBox()">展开工具栏</button>
        <aside class="draw left" id="toolbox">
            <el-row>
                <el-col :span="20">
                    <h2>工具箱</h2>
                </el-col>
                <el-col :span="4">
                    <button class="close" onclick="CloseToolBox()">关闭</button>
                </el-col>
            </el-row>
            <el-row class="item">
                <el-col :span="5">
                    <img id="l20" src="https://envsafe.cn/store/images/extest_buttons/l20.png" draggable="true"
                        ondragstart="DragCreate(event)" />
                </el-col>
                <el-col :span="19">
                    <p>拖动图标到页面中心的组态画板以创建元素。</p>
                </el-col>
            </el-row>
            <el-row class="item">
                <el-col :span="5">
                    <img id="hartmann" src="https://envsafe.cn/store/images/extest_buttons/hartmann.png"
                        draggable="true" ondragstart="DragCreate(event)" />
                </el-col>
                <el-col :span="19">
                    <p>关于图标的文字说明</p>
                </el-col>
            </el-row>
        </aside>
        <div id="whiteboard" ondrop="Drop(event)" ondragover="AllowDrop(event)">

        </div>
    </div>
    <script>
        var app;
        var elecounter = 0;
        $(function () {
            app = new Vue({
                el: '#app',
                data: {
                }
            });

            document.body.ondrop = function (event) {
                event.preventDefault();
                event.stopPropagation();
            };
        });
        //侧边栏
        function OpenToolBox() {
            $(".draw.left").css({ "left": "0" });
        }
        function CloseToolBox() {
            $(".draw.left").css({ "left": "-300px" });
        }
        //拖放
        function AllowDrop(ev) {
            ev.preventDefault();
        }
        function DragCreate(ev) {
            ev.dataTransfer.setData("TargetID", ev.target.id);
            ev.dataTransfer.setData("ActionType", "create");
        }
        function DragMove(ev){
            ev.dataTransfer.setData("TargetID", ev.target.id);
            ev.dataTransfer.setData("ActionType", "move");
            ev.dataTransfer.setData("InsideX", ev.offsetX);
            ev.dataTransfer.setData("InsideY", ev.offsetY);
        }
        function Drop(ev) {
            ev.preventDefault();
            var objId = ev.dataTransfer.getData("TargetID");
            var action = ev.dataTransfer.getData("ActionType");
            // 当元素重合时，鼠标落入重合的元素而非画板，此时取值将不是相对于画板的位置，因此需要采取全局参数获取万无一失的定位
            let host = $("#whiteboard").offset();
            var x = ev.clientX - host.left; //注意：画板边框宽度会影响取值
            var y = ev.clientY - host.top;
            //console.log("mouse offset to whiteboard: x ".concat(x).concat("; y ").concat(y));
            if(action == "create")
            {
                let item = CreateElementFrom(objId); 
                item.css("position", "absolute"); //令元素相对于画板定位
                item.css("left", x);
                item.css("top", y);
                item.css("z-index", 50); //提供默认的图层高度
                item.attr("id", objId.concat(elecounter)); //提供全局唯一标识
                item.attr("draggable", true);
                item.attr("ondragstart", "DragMove(event)");
                elecounter++; //标识符构建累加器加1
                ev.target.appendChild(item[0]);
            }
            else{
                let item = $("#".concat(objId));
                item.css("left", x - Number(ev.dataTransfer.getData("InsideX")));
                item.css("top", y - Number(ev.dataTransfer.getData("InsideY")));
            }
        }

        function CreateElementFrom(id){
            return $("#".concat(id)).clone();
        }
    </script>
</body>

</html>